class Dialog {
  constructor(options = {}) {
      this.options = {
          title: options.title || '提示',
          content: options.content || '',
          showCancel: options.showCancel !== undefined ? options.showCancel : true,
          confirmText: options.confirmText || '确定',
          cancelText: options.cancelText || '取消',
          confirmColor: options.confirmColor || '#1677ff',
          cancelColor: options.cancelColor || '#999999',
          onConfirm: options.onConfirm || function() {},
          onCancel: options.onCancel || function() {},
          maskClosable: options.maskClosable !== undefined ? options.maskClosable : true
      };
      this.init();
  }

  init() {
      // 创建遮罩层
      this.mask = document.createElement('div');
      this.mask.className = 'dialog-mask';
      
      // 创建对话框容器
      this.dialogContainer = document.createElement('div');
      this.dialogContainer.className = 'dialog-container';
      
      // 创建对话框内容
      this.dialogContent = `
          <div class="dialog-header">
              <h3 class="dialog-title">${this.options.title}</h3>
          </div>
          <div class="dialog-body">
              <div class="dialog-message">${this.options.content}</div>
          </div>
          <div class="dialog-footer">
              ${this.options.showCancel ? 
                  `<button class="dialog-btn dialog-cancel" style="color: ${this.options.cancelColor}">${this.options.cancelText}</button>` : 
                  ''
              }
              <button class="dialog-btn dialog-confirm" style="color: ${this.options.confirmColor}">${this.options.confirmText}</button>
          </div>
      `;
      
      this.dialogContainer.innerHTML = this.dialogContent;
      
      // 添加样式
      this.appendStyle();
      
      // 绑定事件
      this.bindEvents();
  }

  appendStyle() {
      if (!document.querySelector('#dialog-style')) {
          const style = document.createElement('style');
          style.id = 'dialog-style';
          style.textContent = `
              .dialog-mask {
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-color: rgba(0, 0, 0, 0.55);
                  z-index: 999;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }
              .dialog-container {
                  background: #fff;
                  border-radius: 8px;
                  width: 85%;
                  max-width: 300px;
                  overflow: hidden;
              }
              .dialog-header {
                  padding: 16px 16px 0;
                  text-align: center;
              }
              .dialog-title {
                  margin: 0;
                  font-size: 17px;
                  font-weight: 500;
                  color: #333;
              }
              .dialog-body {
                  padding: 12px 16px;
                  text-align: center;
              }
              .dialog-message {
                  font-size: 15px;
                  color: #666;
                  line-height: 1.4;
              }
              .dialog-footer {
                  display: flex;
                  border-top: 1px solid #eee;
              }
              .dialog-btn {
                  flex: 1;
                  border: none;
                  background: none;
                  height: 44px;
                  font-size: 16px;
                  cursor: pointer;
              }
              .dialog-btn:active {
                  background-color: #f2f2f2;
              }
              .dialog-cancel {
                  border-right: 1px solid #eee;
              }
          `;
          document.head.appendChild(style);
      }
  }

  bindEvents() {
      // 确认按钮事件
      const confirmBtn = this.dialogContainer.querySelector('.dialog-confirm');
      confirmBtn.addEventListener('click', () => {
          this.options.onConfirm();
          this.close();
      });

      // 取消按钮事件
      if (this.options.showCancel) {
          const cancelBtn = this.dialogContainer.querySelector('.dialog-cancel');
          cancelBtn.addEventListener('click', () => {
              this.options.onCancel();
              this.close();
          });
      }

      // 点击遮罩层关闭
      if (this.options.maskClosable) {
          this.mask.addEventListener('click', (e) => {
              if (e.target === this.mask) {
                  this.close();
              }
          });
      }
  }

  show() {
      document.body.appendChild(this.mask);
      this.mask.appendChild(this.dialogContainer);
  }

  close() {
      document.body.removeChild(this.mask);
  }
}

// 静态方法: alert
Dialog.alert = function(content, options = {}) {
  return new Dialog({
      content,
      showCancel: false,
      ...options
  }).show();
};

// 静态方法: confirm
Dialog.confirm = function(content, options = {}) {
  return new Dialog({
      content,
      ...options
  }).show();
};
export default Dialog;